<template>
    <div class="content">
        <!-- 顶部统计卡片 -->
        <div class="card_header">
            <div class="card_item" v-for="(item, index) in stats" :key="index">
                <div class="card_title">{{ item.title }}</div>
                <div class="card_value">{{ item.value }}</div>
            </div>
        </div>

        <!-- 系统通知 -->
        <div class="notification_section">
            <h3>📌 最新通知</h3>
            <ul>
                <li v-for="(msg, index) in notifications" :key="index">{{ msg }}</li>
            </ul>
        </div>

        <!-- 图表区域（占位） -->
        <div class="chart_section">
            <div class="chart_placeholder">
                <div class="chart_content">
                    <p>工作台：</p>
                    <p>主要用于展示基本信息，以及常规显示。</p>
                </div>
                <div class="chart_content">
                    <p>攻略管理：</p>
                    <p>主要用于管理攻略信息，包括攻略的添加、修改、删除等。</p>
                </div>
                <div class="chart_content">
                    <p>用户管理：</p>
                    <p>主要用于管理用户信息，包括用户的添加、修改、删除等。</p>
                </div>
                <div class="chart_content">
                    <p>订单管理：</p>
                    <p>主要用于展示用户的订单数据</p>
                </div>
                <div class="chart_content">
                    <p>系统设置：</p>
                    <p>主要用于设置小程序端的轮播图，以及用户协议设置</p>
                </div>
            </div>
        </div>

        
    </div>
</template>

<script setup>
const stats = [
    { title: "用户数", value: 1024 },
    { title: "今日订单", value: 58 },
    { title: "待出行量", value: 2943 },
    { title: "已完成量", value: 2 },
]

const notifications = [
    "新版本已上线 v1.0.0",
    "2025-06-15 完成项目部署",
    "订单管理页面修改",
]
</script>

<style scoped>
.content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: #f5f6fa;
}

/* 顶部统计卡片 */
.card_header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.card_item {
    flex: 1;
    border-radius: 8px;
    padding: 16px;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease;
}

.card_item:hover {
    transform: translateY(-4px);
}

.card_title {
    font-size: 14px;
    opacity: 0.9;
}

.card_value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 8px;
}

/* 渐变背景色：分别给前四个卡片 */
.card_header .card_item:nth-child(1) {
    background: linear-gradient(135deg, #42a5f5, #478ed1);
    /* 蓝色调 */
}

.card_header .card_item:nth-child(2) {
    background: linear-gradient(135deg, #66bb6a, #43a047);
    /* 绿色调 */
}

.card_header .card_item:nth-child(3) {
    background: linear-gradient(135deg, #ffa726, #fb8c00);
    /* 橙色调 */
}

.card_header .card_item:nth-child(4) {
    background: linear-gradient(135deg, #ef5350, #e53935);
    /* 红色调 */
}
.chart_content{
    display: flex;
}

/* 快捷操作 */
.quick_actions {
    display: flex;
    gap: 10px;
}

.action_btn {
    padding: 10px 16px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.action_btn:hover {
    background-color: #66b1ff;
}

/* 图表区域 */
.chart_section {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    /* height: 300px; */
}

.chart_placeholder {
    color: #000000;
}

/* 通知区域 */
.notification_section {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
}

.notification_section ul {
    margin-top: 10px;
    padding-left: 20px;
}
</style>